<style lang="less">
.user-data {
  display: grid;
  grid-template-rows: 72px 160px 544px 390px 390px 300px;
  row-gap: 12px;
  .user-data__row {
    .user-data__row-item {
      box-sizing: border-box;
      padding: 20px;
      height: 100%;
      background: #fff;
      border-radius: 2px;
      .user-data__row-title {
        color: #262626;
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 16px;
        &--more {
          color: #595959;
          font-size: 14px;
        }
        &--between {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .choose-time {
            color: #595959;
            font-size: 14px;
            .time {
              cursor: pointer;
              &.active {
                color: #386cff;
              }
              & + .time {
                margin-left: 16px;
              }
            }
          }
        }
      }
    }
    // 第一行
    &:nth-of-type(1) {
      .user-data__row-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .update-time {
          color: #101010;
          font-size: 14px;
          .update-time-title {
            margin-right: 8px;
            color: #808080;
          }
        }
      }
    }
    // 第二行
    &:nth-of-type(2) {
      .user-data__row-content {
        height: 80px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 12px;
        box-sizing: border-box;
        .content__item {
          background: #f4f5f7;
          border-radius: 2px;
          padding: 16px 16px 12px;
          min-width: 243px;
          .content__title {
            margin-bottom: 12px;
            line-height: 16px;
            color: #595959;
            font-size: 12px;
            &--between {
              display: flex;
              justify-content: space-between;
            }
          }
          .content__data {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .data__number {
              color: #262626;
              font-size: 20px;
              font-weight: 600;
              &--yellow {
                color: #ffb53c;
              }
            }
            .data__tip {
              color: #808080;
              font-size: 12px;
              &--red {
                color: #ff3c3c;
              }
            }
          }
        }
      }
    }
    // 第三行
    &:nth-of-type(3) {
      .arco-progress-line-bar {
        z-index: 99;
      }
      .user-data__row-item {
        .user-data__row-content {
          height: 362px;
          line-height: 0;
        }
        &:nth-of-type(1) {
          flex: 1;
          min-width: 696px;
          .user-data__row-content {
            .content__item {
              .progress__text-wraper {
                height: 38px;
                display: flex;
                justify-content: center;
                margin-bottom: 8px;

                .progress__text {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: #f4f5f7;
                  width: 80px;
                  height: 30px;
                  font-size: 14px;
                  color: #595959;
                  position: relative;
                  &::before {
                    content: "";
                    display: block;
                    width: 0;
                    height: 0;
                    border: 40px solid transparent;
                    border-top: 8px solid#f4f5f7;
                    position: absolute;
                    bottom: -48px;
                  }
                }
              }
              .item__title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
                color: #595959;
                font-size: 14px;
                line-height: 20px;
                &--tips {
                  color: #bfbfbf;
                }
                &--number {
                  font-weight: 600;
                }
              }
              .arco-progress-line {
                height: 20px !important;
                border-radius: 2px;
                .arco-progress-line-bar {
                  border-radius: 2px;
                }
              }
              & + .content__item {
                margin-top: 8px;
              }
            }
          }
        }
        &:nth-of-type(2) {
          width: 340px;
        }
        & + .user-data__row-item {
          margin-left: 12px;
        }
      }
    }
    // 第四、五行
    &:nth-of-type(4),
    &:nth-of-type(5) {
      display: flex;
      .user-data__row-item {
        flex: 1;
        min-width: 518px;
        & + .user-data__row-item {
          margin-left: 12px;
        }
        .user-data__row-content {
          height: 310px;
        }
      }
    }
    // 第六行
    &:nth-of-type(6) {
      .user-data__row-content {
        height: 220px;
      }
    }
  }
}
</style>

<template>
  <div class="user-data">
    <div class="user-data__row">
      <div class="user-data__row-item">
        <a-range-picker
          style="width: 240px"
          show-time
          :time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }"
          format="YYYY-MM-DD HH:mm"
        />
        <!-- <p class="update-time">
          <span class="update-time-title">数据更新时间：</span>
          <span>2022-05-26 12:43:13</span>
        </p> -->
      </div>
    </div>
    <div class="user-data__row">
      <div class="user-data__row-item">
        <p class="user-data__row-title">用户数据</p>
        <div class="user-data__row-content">
          <div class="content__item" v-for="it in usertData" :key="it.title">
            <p class="content__title content__title--between">{{ it.title }}</p>
            <p class="content__data">
              <span class="data__number">{{ it.data }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="user-data__row">
      <div class="user-data__row-item">
        <p class="user-data__row-title">用户漏斗模型</p>
        <div class="user-data__row-content">
          <div
            class="content__item"
            v-for="(it, i) in funnelModelData"
            :key="it.title"
          >
            <div class="progress__text-wraper" v-if="i !== 0">
              <span class="progress__text"
                >{{ (it.progress * 100).toFixed(2) }}%</span
              >
            </div>
            <p class="item__title">
              <span class="item__text--left">
                <span>{{ it.title }}</span>
                <span class="item__title--tips">{{ it.subTitle }}</span>
              </span>
              <span class="item__text--right">
                <span class="item__title--number">{{ it.titleData }}</span
                >人
              </span>
            </p>
            <a-progress
              :percent="+it.progress"
              track-color="#F4F5F7"
              color="#386CFF"
              :show-text="false"
              :style="{ height: '20px' }"
            ></a-progress>
          </div>
        </div>
      </div>
    </div>
    <div class="user-data__row">
      <div class="user-data__row-item">
        <p class="user-data__row-title">
          用户年龄占比
          <a-tooltip content="This is tooltip content">
            <icon-exclamation-circle />
          </a-tooltip>
        </p>
        <div class="user-data__row-content">
          <echarts-pie :series-data="userAgeData" />
        </div>
      </div>
      <div class="user-data__row-item">
        <p class="user-data__row-title">
          用户性别占比
          <a-tooltip content="This is tooltip content">
            <icon-exclamation-circle />
          </a-tooltip>
        </p>
        <div class="user-data__row-content">
          <echarts-pie :series-data="userSexData" />
        </div>
      </div>
    </div>
    <div class="user-data__row">
      <div class="user-data__row-item">
        <p class="user-data__row-title user-data__row-title--between">
          <span>
            用户设备占比
            <a-tooltip content="This is tooltip content">
              <icon-exclamation-circle />
            </a-tooltip>
          </span>
          <a-select :style="{ width: '120px' }">
            <a-option>官网</a-option>
          </a-select>
        </p>
        <div class="user-data__row-content">
          <echarts-pie :series-data="userDeviceData" />
        </div>
      </div>
      <div class="user-data__row-item">
        <p class="user-data__row-title">
          新老用户占比
          <a-tooltip content="This is tooltip content">
            <icon-exclamation-circle />
          </a-tooltip>
        </p>
        <div class="user-data__row-content">
          <echarts-pie :series-data="userNewOldData" />
        </div>
      </div>
    </div>
    <div class="user-data__row">
      <div class="user-data__row-item">
        <p class="user-data__row-title user-data__row-title--between">
          <span>
            用户在线时段
            <a-tooltip content="This is tooltip content">
              <icon-exclamation-circle />
            </a-tooltip>
          </span>
          <a-select :style="{ width: '120px' }">
            <a-option>按天</a-option>
          </a-select>
        </p>
        <div class="user-data__row-content">
          <echarts-line series-name="历史在线用户" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import echartsPie from "@/components/echarts-pie.vue";
import echartsLineVue from "@/components/echartsLine.vue";

const usertData = reactive([
  {
    title: "注册总人数（人）",
    data: "324,342",
  },
  {
    title: "注册潜在客户数",
    data: "324,342",
  },
  {
    title: "实名认证用户数",
    data: "324,342",
  },
  {
    title: "付费转化人数",
    data: "324,342",
  },
]);

// 漏斗模型
const funnelModelData = reactive([
  {
    title: "第一步：",
    subTitle: "登录过后台",
    titleData: 6345,
    progress: 1,
  },
  {
    title: "第二步：",
    subTitle: "实名认证成功",
    titleData: 456,
    progress: 0.0719,
  },
  {
    title: "第三步：",
    subTitle: "创建活动",
    titleData: 404,
    progress: 0.886,
  },
  {
    title: "第四步：",
    subTitle: "发生过付费行为",
    titleData: 23,
    progress: 0.0569,
  },
  {
    title: "第五步：",
    subTitle: "发生过复购行为",
    titleData: 23,
    progress: 0.0569,
  },
]);

// 用户年龄占比
const userAgeData = reactive([
  { value: 342, name: "小于20岁" },
  { value: 1000, name: "20-29岁" },
  { value: 1500, name: "30-39岁" },
  { value: 800, name: "40-49岁" },
  { value: 200, name: "50岁以上（含）" },
]);
// 用户性别占比
const userSexData = reactive([
  { value: 55, name: "男" },
  { value: 50, name: "女" },
]);
// 用户设备占比
const userDeviceData = reactive([
  { value: 550, name: "PC端" },
  { value: 255, name: "移动端" },
  { value: 55, name: "其他" },
]);
// 新老用户占比
const userNewOldData = reactive([
  { value: 550, name: "新用户" },
  { value: 150, name: "老用户" },
]);
</script>
